<template>
	<div class="wrap">
		<div class="body">
			<div class="headline">
				<span class="title">近一年接入企业与点位累计数</span>
			</div>
			<e-chart autoresize :options="chartOptions" class="charts" style="height: 85%;"></e-chart>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				chartOptions:{
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						data: ['企业总数', '点位总数', '企业数环比增长率', '点位数环比增长率'],
						textStyle:{
						 	color:'#fff'
						},
						top:'5%'
					},
				    grid: {
				        left: '3%',
				        right: '4%',
				        top:'25%',
				        bottom: '2%',
				        containLabel: true
				    },					
					xAxis: [{
						type: 'category',
						data: ['2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
						axisPointer: {
							type: 'shadow'
						},
                        axisLabel: {
                            color: '#fff'
                        },	
	                    //设置轴线的属性
	                    axisLine:{
	                        lineStyle:{
	                            color:'#fff',
	                        }
	                    }                         
					}],
					yAxis: [
					   {
							type: 'value',
							name: '数量',
				            min: 0,
				            max: 28000,
				            interval: 4000,								
							axisLabel: {
								color: '#fff',
								formatter: '{value}'
							},
		                    axisLine:{
		                        lineStyle:{
		                            color:'#fff',
		                        }
		                    }   							
						},
						{
							type: 'value',
							name: '增长率',
				            min: 0,
				            max: 35,
				            interval: 5,							
							axisLabel: {
								color: '#fff',
								formatter: '{value}%'
							},
		                    axisLine:{
		                        lineStyle:{
		                            color:'#fff',
		                        }
		                    }   							
						}
					],
					series: [{
						    color: ['#36A0F0'],
							name: '企业总数',
							type: 'bar',
							data: [3175, 3246, 3462, 3585, 3705, 4131, 4571, 4879, 5179, 6313, 8233, 9001],
//							itemStyle: {
//								normal: {
//									label: {
//										show: true, //开启显示
//										position: 'top', //在上方显示
//										textStyle: { //数值样式
//											color: '#fff',
//											fontSize: 12
//										}
//									}
//								}
//							}

						},
						{
							color: ['#5CECC3'],
							name: '点位总数',
							type: 'bar',
							data: [14171, 14340, 14543, 14755, 14941, 15223, 15441, 15813, 16653, 20433, 24273, 25326],
//							itemStyle: {
//								normal: {
//									label: {
//										show: true, //开启显示
//										position: 'top', //在上方显示
//										textStyle: { //数值样式
//											color: '#fff',
//											fontSize: 12
//										}
//									}
//								}
//							},

						},
						{
							color: ['#D8B539'],
							name: '企业数环比增长率',
							type: 'line',
							smooth: 0,
							yAxisIndex: 1,
							data: [1.2, 2.2, 6.7, 3.6, 3.3, 11.5, 10.7, 6.7, 6.1,21.9,30.4,2.3],
//							itemStyle: {
//								normal: {
//									label: {
//										show: true, //开启显示
//										position: 'top', //在上方显示
//										textStyle: { //数值样式
//											color: '#fff',
//											fontSize: 12
//										}
//									}
//								}
//							},							
						},
						
						{
							color: ['#D85939'],
							name: '点位数环比增长率',
							type: 'line',
							smooth: 0,
							yAxisIndex: 1,
							data: [1.0,1.2,1.4,1.5,1.3,1.9,1.4,2.4,5.3,22.7,18.8,4.2],
//							itemStyle: {
//								normal: {
//									label: {
//										show: true, //开启显示
//										position: 'top', //在上方显示
//										textStyle: { //数值样式
//											color: '#fff',
//											fontSize: 12
//										}
//									}
//								}
//							}							
						}
					]
				}
              }
			},
			mounted() {

			},
			methods: {

			}
		}
</script>
<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.head {
		display: flex;
		margin-bottom: 4px;
		.left {
			width: 48%;
			margin-right: 4%;
		}
		.right {
			width: 48%;
		}
	}
	
	.body {
		flex: 1;
	}
	
	.headline {
		display: flex;
		color: #fff;
		.title {
			background: #131420;
			padding: 8px 15px;
			display: inline-block;
			font-size: 14px;
			box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
			border: 1px solid #3591ff80;
		}
	}
	
	.numberWrap {
		height: 60px;
		display: flex;
		justify-content: space-around;
		.type {
			display: flex;
			height: 100%;
			background: #17213e;
			font-size: 45px;
			align-items: center;
			justify-content: center;
			color: #20dbfd;
			text-shadow: 0 0 25px #00d8ff;
			text-align: center;
			font-family: yjsz
		}
		.type1 {
			width: 9%;
		}
		.type2 {
			width: 19%;
		}
	}
</style>